<template>
  <div class="dashboard-container" ref="appContainer">
    <div class="container" style="max-width: 100%;">
      <div class="row">
        <div v-for="(c, index1) in cardWidth" :key="index1" :class="c">
          <Card :parentIndex="index1" :allEqui="allEqui" />
        </div>
      </div>
      <div class="row" ref="card_box">
        <div class="col-lg-6 col-md-12">
          <div id="main" ref="dom2"></div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="bjBox">
            <el-row>
              <el-col :span="7">
                <div class="grid-content bg-purple">报警时间</div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple">设备编号</div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple-light">报警类型</div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content bg-purple">报警数值</div>
              </el-col>
            </el-row>
            <vue-seamless-scroll :data="tableData" class="seamless-warp">
              <div class="item">
                <li v-for="(item, index) in tableData" :key="index" style="list-style:none">
                  <el-row>
                    <el-col :span="7">
                      <div class="grid-content bg-purple" v-text="item.addTime"></div>
                    </el-col>
                    <el-col :span="7">
                      <div class="grid-content bg-purple" v-text="item.equipmentNo"></div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple-light" v-text="abnormal(item.type)"></div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content bg-purple" v-text="item.value + item.unit"></div>
                    </el-col>
                  </el-row>
                </li>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="col-xl-12" style="margin-top: 1rem;">
        <div id="main" ref="dom1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWork } from "@/api/table";
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import Card from '@/components/public/card.vue'
import { getWaring } from '@/api/getwaring'
import { getToken } from '@/utils/auth'

export default {
  components: {
    Card,
  },

  data() {
    return {
      num: 0,
      like: true,
      title: "设备总数",
      vwidth: '',
      data: '',
      tableData: [],
      // 设备信息
      allEqui: [],
      cardWidth: [
        'col-lg-2 col-md-6',
        'col-lg-2 col-md-6',
        'col-lg-2 col-md-6',
        'col-lg-2 col-md-6',
        'col-lg-2 col-md-6',
        'col-lg-2 col-md-6',
      ],
      notifyPromise: Promise.resolve(),
      // 折线图数据
      LineChart: [],
      LineChart1: [],
      LineChart2: [],

      option: {
        type: "category",
        title: {
          text: '报警数据',
          textStyle: {
            fontSize: 14,// 这里设置标题字体大小为20
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: [],
          textStyle: {
            fontSize: 15
          },
          left: '20%',
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['数值报警设备数量', '数值报警数量', '故障设备数量', '故障报警数量', '离线设备数量', '离线报警数量'],
          }
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      },
      // 饼图
      option1: {
        title: {
          text: '工单数据',
          left: 'center',
          textStyle: {
            fontSize: 15
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        color: ['#45C2E0', '#C1EBDD', '#FFC851'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            fontSize: 13
          }
        },
        series: [
          {
            name: '饼图',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              // formatter: '{b}: {c} ({d}%)',
              formatter: '{b}: {c}',
              textStyle: {
                fontSize: 12
              }
            },
          }
        ]
      },
    }
  },

  name: 'Dashboard',

  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    // 近期三个月数据
    getWork('/system/data', 'get').then(res => {
      let optionData1 = this.option1.series[0].data;
      optionData1.push({ value: res.msg.unAssign, name: '未指派工单数量' })
      optionData1.push({ value: res.msg.inHandle, name: '处理中工单数量' })
      optionData1.push({ value: res.msg.confirm, name: '待确认工单数量' })
      let dom2 = echarts.init(this.$refs.dom2);
      dom2.setOption(this.option1);
    })
    getWork('/system/alarmData', 'get').then(res => {
      let echData = this.option.series
      for (let index = 0; index < res.msg.length; index++) {
        this.option.legend.data.push(res.msg[index].month + '月')
        if (index == 0) {
          this.LineChart.push(res.msg[index].alarmEquipmentNumber)
          this.LineChart.push(res.msg[index].alarmNumber)
          this.LineChart.push(res.msg[index].faultEquipmentNumber)
          this.LineChart.push(res.msg[index].faultNumber)
          this.LineChart.push(res.msg[index].offlineEquipmentNumber)
          this.LineChart.push(res.msg[index].offlineNumber)
        }
        if (index == 1) {
          this.LineChart1.push(res.msg[index].alarmEquipmentNumber)
          this.LineChart1.push(res.msg[index].alarmNumber)
          this.LineChart1.push(res.msg[index].faultEquipmentNumber)
          this.LineChart1.push(res.msg[index].faultNumber)
          this.LineChart1.push(res.msg[index].offlineEquipmentNumber)
          this.LineChart1.push(res.msg[index].offlineNumber)
        }
        if (index == 2) {
          this.LineChart2.push(res.msg[index].alarmEquipmentNumber)
          this.LineChart2.push(res.msg[index].alarmNumber)
          this.LineChart2.push(res.msg[index].faultEquipmentNumber)
          this.LineChart2.push(res.msg[index].faultNumber)
          this.LineChart2.push(res.msg[index].offlineEquipmentNumber)
          this.LineChart2.push(res.msg[index].offlineNumber)
        }
      }
      echData[0].name = res.msg[0].month + '月'
      echData[0].data = this.LineChart
      echData[1].name = res.msg[1].month + '月'
      echData[1].data = this.LineChart1
      echData[2].name = res.msg[2].month + '月'
      echData[2].data = this.LineChart2

      // echarts.init定义画布获 this.$refs.dom1取dom节点
      let dom1 = echarts.init(this.$refs.dom1);
      // 定义卡片栏中的图表
      // 第五步：绘制图表，把配置项给实例对象
      dom1.setOption(this.option);
    });
    // 设备信息展示
    getWork('/system/data', 'get').then(res => {
      this.allEqui.push(res.msg.equipmentTotal)
      this.allEqui.push(res.msg.unableEquipment)
      this.allEqui.push(res.msg.normalEquipment)
      this.allEqui.push(res.msg.alarmEquipment)
      this.allEqui.push(res.msg.faultEquipment)
      this.allEqui.push(res.msg.offlineEquipment)
    })
    getWaring().then(res => {
      this.tableData = res.msg
    })
    // 报警检测弹窗
    setInterval(() => {
      if (getToken()) {
        getWaring().then(res => {
          // 测试数据
          // res.msg[0].value = '30'
          res.msg.forEach(element => {
            const filtered = this.tableData.filter(item => item.value === element.value && item.equipmentNo === element.equipmentNo && item.type === element.type);
            if (filtered.length == 0) {
              this.notify(element);
            }
          });
          this.tableData = res.msg
        })
      }
    }, 10 * 1000);
  },

  mounted() {
    // if (this.num == 0) {
    //   this.timer();
    // }
    // // echarts.init定义画布获 this.$refs.dom1取dom节点
    let dom1 = echarts.init(this.$refs.dom1);
    let dom2 = echarts.init(this.$refs.dom2);
    // // 定义卡片栏中的图表
    // // 第五步：绘制图表，把配置项给实例对象
    // dom1.setOption(this.option);
    // dom2.setOption(this.option1);
    // cardTrees.setOption(cardTre)
    // 根据元素大小改变图表大小
    function resizeChart() {
      dom2.resize({
        width: 'auto',  // 宽度随着父容器变化而变化
        height: 'auto'  // 高度随着父容器变化而变化
      });
      dom1.resize({
        width: 'auto',
        height: 'auto'
      });
    };
    // 监听元素大小改变事件定义监听事件名称resizeChart()
    this.$erd.listenTo(this.$refs.appContainer, resizeChart);
  },
  methods: {
    // timer() {
    //   window.location.reload();
    //   this.num = 2
    // },
    abnormal(type) {
      if (type == '01') {
        return '浓度异常'
      } else {
        return '温度异常'
      }
    },
    // 报警提示
    notify(msg) {
      this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
        this.$notify.warning({
          title: '报警设备' + msg.equipmentNo,
          message: '报警浓度' + msg.value,
          dangerouslyUseHTMLString: true,
          duration: 5000,
          offset: 100,
          onClick() {
            console.log(123);
          }
        });
      })
    }
  },
  beforeDestroy() {

  },

}
</script>

<style lang="scss" scoped>
@media (min-width: 1200px) {

  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1200px;
  }
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding: 0%;
}

.item li {
  font-size: 15px;
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

#main {
  margin-top: 1rem;
  //min-width: 500px;
  width: 100%;
  height: 20rem;
  background-color: #fefefe;
  border: 1px solid #dedede;
  padding: .5rem;
  padding-top: 1rem;
  box-shadow: -5px 5px 10px 0 #dadee8;
  border-radius: 5px;
}

.car-box {
  width: 100%;
  display: flex;
}

.el-row {

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col-6:nth-of-type(5) {
  margin-top: 1rem;
}

.el-col-6:nth-of-type(6) {
  margin-top: 1rem;
}

.el-col-6:nth-of-type(7) {
  margin-top: 1rem;
}

.bg-purple-light,
.bg-purple {
  font-size: 11px;
  background-color: #fefefe;
  border: 1px solid #dedede;
  width: 100%;
  padding: 1rem;
}

.bjBox {
  height: 20rem;
  margin-top: 1rem;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
  box-shadow: -5px 5px 10px 0 #dadee8;
}

.bjTitle div {
  background-color: #fefefe;
  width: 100%;
  border: 1px solid #dedede;
  padding: 1rem;
  font-weight: bold;
  color: #909399;
}

.seamless-warp {
  height: 15.5rem;
  border: 1px solid #dedede;
  color: #606266;
  overflow: hidden;
}

.notify-message {
  margin-top: 50px;
}
</style>
